Positioning HTML Elements using Relative Positioning
02-02-18 Course- CSS-Simple
You can position elements in an HTML Web page using two types of positioning: relative and absolute, Using relative positioning, you can position elements at locations relative to its normal position. For example, you can position an HTML element 20 pixels to the left or 20 pixels to the right from its normal position in the Web browser.
Let’s do the following steps to position HTML elements using relative positioning:
<!DOCTYPE html>
<html>
<head>
<title>Positioning HTML Elements using Relative Positioning </title>
</head>
<body>
<h2>This text is at the normal position.</h2>
<h2 style=”position: relative; left: -20px”> This text is moved left to its normal position</h2>
<h2 style=”position: relative; left: 20px”>This text is moved right to its normal position</h2>
</body>
</html>
Save the document with the name RelativePositioning.html and open with browser.